/**
 * Schema 渲染器组件
 * 用于预览 lowcode schema
 */

import React, { useEffect, useRef } from 'react';

interface SchemaRendererProps {
  schema: any;
  scale?: number; // 缩放比例
}

const SchemaRenderer: React.FC<SchemaRendererProps> = ({ schema, scale = 1 }) => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    console.log('SchemaRenderer: 开始渲染', schema);

    if (!containerRef.current) {
      console.error('SchemaRenderer: containerRef 为空');
      return;
    }

    if (!schema) {
      console.error('SchemaRenderer: schema 为空');
      return;
    }

    // schema 是 design 对象，包含 id 和 schema 属性
    const designId = schema.id || schema.schema?.id;
    console.log('SchemaRenderer: design.id =', designId);
    console.log('SchemaRenderer: schema 对象 =', schema);

    // TODO: 使用 @alilc/lowcode-react-renderer 渲染 schema
    // 这里先用简单的 HTML 渲染示例
    const renderSchema = (schemaData: any) => {
      // 简化版渲染逻辑
      const container = containerRef.current;
      if (!container) return;

      // 清空容器
      container.innerHTML = '';

      // 创建简单的预览内容
      const preview = document.createElement('div');
      // 计算缩放后需要的实际尺寸，使缩放后正好铺满容器
      const scaledWidth = scale < 1 ? `${100 / scale}%` : '100%';
      const scaledHeight = scale < 1 ? `${100 / scale}%` : '100%';

      preview.style.cssText = `
        width: ${scaledWidth};
        height: ${scaledHeight};
        min-height: 400px;
        background: #fff;
        padding: 16px;
        box-sizing: border-box;
        transform: scale(${scale});
        transform-origin: top left;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      `;

      // 根据 design ID 渲染不同的示例
      const designId = schema.id || schema.schema?.id;
      console.log('SchemaRenderer: 判断 designId', designId);

      if (designId === 'design-1') {
        console.log('SchemaRenderer: 渲染 design-1');
        preview.innerHTML = `
          <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; background: #fafafa; padding: 40px;">
            <h1 style="margin: 0 0 20px 0; font-size: 48px; color: #333; font-weight: bold; text-align: center;">
              欢迎使用低代码平台
            </h1>
            <p style="margin: 0; font-size: 24px; color: #666; text-align: center;">
              快速搭建企业级应用
            </p>
          </div>
        `;
      } else if (designId === 'design-2') {
        console.log('SchemaRenderer: 渲染 design-2');
        preview.innerHTML = `
          <div style="height: 100%; background: #f0f0f0; padding: 24px;">
            <div style="background: #fff; border-radius: 8px; padding: 32px; height: calc(100% - 48px); box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
              <h2 style="margin: 0 0 24px 0; font-size: 28px; color: #333; font-weight: bold; padding-bottom: 16px; border-bottom: 2px solid #e8e8e8;">
                信息录入表单
              </h2>
              <div style="font-size: 18px; color: #999; line-height: 2;">
                <div style="margin-bottom: 16px;">表单字段 1: _______________________</div>
                <div style="margin-bottom: 16px;">表单字段 2: _______________________</div>
                <div style="margin-bottom: 16px;">表单字段 3: _______________________</div>
                <div style="margin-bottom: 16px;">表单字段 4: _______________________</div>
              </div>
            </div>
          </div>
        `;
      } else if (designId === 'design-3') {
        console.log('SchemaRenderer: 渲染 design-3');
        preview.innerHTML = `
          <div style="height: 100%; background: #f0f0f0; padding: 24px;">
            <div style="display: flex; gap: 24px; height: 100%;">
              <div style="flex: 1; background: #fff; border-radius: 8px; padding: 32px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); display: flex; flex-direction: column;">
                <h3 style="margin: 0 0 16px 0; font-size: 24px; color: #333; font-weight: bold;">
                  卡片 1
                </h3>
                <p style="margin: 0; font-size: 18px; color: #999;">
                  内容区域
                </p>
              </div>
              <div style="flex: 1; background: #fff; border-radius: 8px; padding: 32px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); display: flex; flex-direction: column;">
                <h3 style="margin: 0 0 16px 0; font-size: 24px; color: #333; font-weight: bold;">
                  卡片 2
                </h3>
                <p style="margin: 0; font-size: 18px; color: #999;">
                  内容区域
                </p>
              </div>
            </div>
          </div>
        `;
      } else if (designId === 'design-4') {
        console.log('SchemaRenderer: 渲染 design-4');
        preview.innerHTML = `
          <div style="height: 100%; background: #f0f0f0; padding: 24px;">
            <div style="display: flex; gap: 24px; height: 100%;">
              <div style="flex: 1; background: #fff; border-radius: 8px; padding: 40px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); display: flex; flex-direction: column; align-items: center; justify-content: center;">
                <div style="font-size: 48px; font-weight: bold; color: #1890ff; margin-bottom: 8px;">
                  1,234
                </div>
                <div style="font-size: 16px; color: #999;">
                  指标1
                </div>
              </div>
              <div style="flex: 1; background: #fff; border-radius: 8px; padding: 40px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); display: flex; flex-direction: column; align-items: center; justify-content: center;">
                <div style="font-size: 48px; font-weight: bold; color: #52c41a; margin-bottom: 8px;">
                  5,678
                </div>
                <div style="font-size: 16px; color: #999;">
                  指标2
                </div>
              </div>
              <div style="flex: 1; background: #fff; border-radius: 8px; padding: 40px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); display: flex; flex-direction: column; align-items: center; justify-content: center;">
                <div style="font-size: 48px; font-weight: bold; color: #faad14; margin-bottom: 8px;">
                  9,012
                </div>
                <div style="font-size: 16px; color: #999;">
                  指标3
                </div>
              </div>
            </div>
          </div>
        `;
      } else {
        // 默认渲染
        console.log('SchemaRenderer: 使用默认渲染，designId =', designId);
        preview.innerHTML = `
          <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #999;">
            <div style="text-align: center;">
              <div style="font-size: 48px; margin-bottom: 8px;">📐</div>
              <div>设计方案预览</div>
            </div>
          </div>
        `;
      }

      container.appendChild(preview);
      console.log('SchemaRenderer: 渲染完成，已添加到容器');
    };

    renderSchema(schema);
    console.log('SchemaRenderer: renderSchema 调用完成');
  }, [schema, scale]);

  return (
    <div
      ref={containerRef}
      style={{
        width: '100%',
        height: '100%',
        minHeight: '100%',
        overflow: 'hidden',
        position: 'relative',
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
      }}
    />
  );
};

export default SchemaRenderer;
